<template>
  <h2>watch和computed及watchEffect函数</h2>
  <fieldset>
    <legend>姓名操作</legend>
    姓氏：<input type="text" placeholder="请输入姓氏" v-model="user.firstName" /><br/>
    名字：<input type="text" placeholder="请输入名字" v-model="user.lastName" /><br/>
  </fieldset>
  <fieldset>
    <legend>计算属性和监视的演示</legend>
    姓名：<input type="text" placeholder="显示姓名" v-model="fullName1" /><br/>
    姓名：<input type="text" placeholder="显示姓名" v-model="fullName2" /><br/>
    姓名：<input type="text" placeholder="显示姓名" v-model="fullName3" /><br/>
  </fieldset>
</template>

<script lang="ts">
import {computed, defineComponent, reactive, ref, watch, watchEffect} from "vue";

export default defineComponent({
  name: "WatchDemo",
  setup(){
    // 定义响应式对象，存储姓氏和名字
    const user = reactive({
      firstName: '东方',
      lastName: '不败'
    })
    // 通过计算属性的方式实现 第一个姓名的操作效果
    const fullName1 = computed(() => {
      // geter的简写形式
      return user.firstName+'_'+user.lastName
    })
    // 通过计算属性的方式实现 第二个姓名的操作效果
    const fullName2 = computed({
      get() {
        return user.firstName+'_'+user.lastName
      },
      set(val: String) {
        // ts的语法
        const names = val.split('_')
        user.firstName = names[0]
        user.lastName = names[1]
      }
    })
    // 通过监视的方式实现第三个姓名的操作
    const fullName3 = ref('')
    // 使用watch进行数据监视
    // watch(user,({firstName,lastName}) => {
    //   fullName3.value = firstName + '_' + lastName
    // },{immediate: true,deep:true}) //默认执行一次，深度监视

    watchEffect(()=>{
      fullName3.value = user.firstName+ '_'+ user.lastName
    }) // 默认就会执行一次

    // watchEffect(() => {
    //   const names = fullName3.value.split('_')
    //   user.firstName = names[0]
    //   user.lastName = names[1]
    // })

    // watch也可以同时监视多个数据
    // watch([user.firstName,user.lastName,fullName3],() => {
    //   console.log('==========')
    // })

    //watch 另一种写法
    // watch([()=>user.firstName,()=>user.lastName,fullName3],() =>{
    //   console.log('======')
    // })

    return {
      user,
      fullName1,
      fullName2,
      fullName3
    }
  }
})
</script>

<style scoped>

</style>
